<template>
  <div class=".box divHead">
    <el-row>
      <el-col :span="18">
        <div class="searchForm">
          <el-form :model="form">
            <el-col :span="8">
              <el-form-item label="仓库编号">
                <el-input v-model="form.like_code" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="仓库名称">
                <el-input v-model="form.like_name" placeholder="请输入" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="仓库状态">
                <el-select v-model="form.status" placeholder="请选择" style="width:100%" clearable>
                  <el-option label="全部" value="全部" />
                  <el-option label="停用" value="停用" />
                  <el-option label="启用" value="启用" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-form>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="searchBtn">
          <el-button round @click="search">搜索</el-button>
          <el-button round @click="reset">重置</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'SearchBtn',
  data() {
    return {
      form: {
        like_code: '',
        like_name: '',
        status: '',
        current: 1,
        size: 10,
        descs: 'createTime'
      }
    }
  },
  methods: {
    // 重置
    reset() {
      this.form = {}
    },
    // 搜索
    search() {
      const arr = {
        like_code: this.form.like_code,
        like_name: this.form.like_name,
        current: 1,
        size: 10,
        descs: 'createTime'
      }
      if (this.form.status === '停用') {
        arr.status = 0
      } else if (this.form.status === '启用') {
        arr.status = 1
      }
      this.$emit('search', arr)
    }
  }
}

</script>
<style>
  .el-form-item{
    padding: 0 15px;
  }
  .el-row{
    margin-top: -15px;
  }
</style>

<style lang='scss' scoped>

.divHead {
  height: 127px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  padding: 30px;
  margin-bottom: 20px;
  line-height: 127px;
}
.searchBtn {
  float: right;

  .el-button:first-child {
    background: #ffb200;
    color: #332929;
    border: 0;
    margin-right: 15px;
  }
  .el-button:last-child {
   background: #f8f5f5;
    color: #332929;
    border: 0;

  }
  .el-button:first-child:hover {
   background: #ff8e00;
  }
  .el-button:last-child:hover {
       background: #ffb200;
  }
}
.box {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
}
</style>
